<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1000 500" preserveAspectRatio="xMinYMin meet" >
 
  <defs>
    <filter id="filter4444" color-interpolation-filters="sRGB">
      <feGaussianBlur stdDeviation="3" id="feGaussianBlur9"/>
    </filter>
    <filter id="filter4502" height="1" width="1" color-interpolation-filters="sRGB" y="0" x="0">
      <feGaussianBlur id="feGaussianBlur4504" stdDeviation="3"/>
    </filter>
    <radialGradient id="radialGradient4530" gradientUnits="userSpaceOnUse" cy="156" cx="453" gradientTransform="matrix(2.6303 6.1449e-7 -.0050582 2.6926 -1052.6 -365.61)" r="29">
      <stop id="stop3688" offset="0" stop-color="#977640"/>
      <stop id="stop3690" offset="1" class="s0"/>
    </radialGradient>
    <radialGradient id="radialGradient4532" gradientUnits="userSpaceOnUse" cy="161" cx="456" gradientTransform="matrix(-3.2548 .012681 -9.7842e-7 -3.3049 2021 617.52)" r="29">
      <stop id="stop4454" offset="0" stop-color="#977640"/>
      <stop id="stop4456" offset="1" class="s0"/>
    </radialGradient>
    <linearGradient id="linearGradient4534" y2="98" gradientUnits="userSpaceOnUse" x2="563" gradientTransform="matrix(-.25136 -.34551 .29567 -.21510 362.44 304.84)" y1="92" x1="369">
      <stop id="stop4508" offset="0" stop-color="#000000"/>
      <stop id="stop4510" offset="1" style="stop-color:#000000;stop-opacity:0"/>
    </linearGradient> 
	<linearGradient id="Grad1" x1="0%" y1="0%" x2="0%" y2="100%" >
        <stop offset="0%" stop-color="skyblue" />
		 <stop offset="40%" stop-color="white" />
		 <stop offset="70%" stop-color="green" />
		 <stop offset="100%" stop-color="black" />
      </linearGradient>   
	  <linearGradient id="GradRect" x1="0%" y1="0%" x2="0%" y2="100%" >
        <stop offset="0%" stop-color="#B6E1F3" />
		 <stop offset="100%" stop-color="#474747" />
      </linearGradient>  
	  
    <symbol id="grass"  viewBox="0 0 1600 2496" > 	 
	 <g id="grass" transform="translate(1592.4714,1450.3679)" fill="#518B51" stroke="#004A00" stroke-width="0.1">
    <g id="g5201" transform="matrix(58.394198,45.45022,45.45022,-58.394198,-38079.323,9455.4817)" >
      <path id="path3602" d="m311.8 408.4c-0.1 4.7-0.4 9.4-2.1 13.9 0.9-4.8 1.6-12.8 1.4-14.5l0.7 0.6z" />
      <path id="path3604" d="m311.1 407.8c-0.4 6.1-1.3 11-2.8 14 1.2-4.5 2.2-10.6 2.3-14.4l0.5 0.4z" />
      <path id="path3606" d="m311.1 407.8c-1 5.6-2.6 11.3-5.2 14.9 1.9-4.2 4.4-12.1 4.4-15.6l0.7 0.6z" />
      <path id="path3608" d="m310.6 407.4c-0.8 5.5-3.7 11.9-7.1 15.6 2.4-3.5 6-11.7 6.6-16.1l0.5 0.5z" />
      <path id="path3610" d="m309 406c-1.1 2.8-4.3 8.1-6.8 10.4 3.8-3 6.4-7.2 7.3-10l-0.4-0.4z" />
      <path id="path3612" d="m309.4 406.3c-1.5 3.6-4.4 8.6-7.2 11.4 3.7-3.2 6.4-7.4 7.7-10.9l-0.5-0.4z" />
      <path id="path3614" d="m309.7 406.6c-1.5 4-4.8 10.1-7.1 12.6 3.9-3.5 6.2-8 7.7-12.1l-0.6-0.5z" />
      <path id="path3616" d="m309.9 406.8c-2.5 7-5.6 12.5-7.7 14.9 3.9-2.8 7.3-11.5 8.1-14.5l-0.5-0.4z" />
    </g>
  </g>
  </symbol>
  </defs> 
   <style>
    
.s0{
	stop-color:#3d280a;
	stop-opacity:0;
}
.s1{
	fill:#977640;
	stroke:#000;
}
.s2{
	fill:#fff;
	stroke-width:6;
	stroke:#000;
}
.s3{
	fill:#000;
	stroke-width:8;
	stroke:#000;
}


  </style>
 
  
   <rect width="1500" height="1500" style="fill:url(#Grad1);" />
 <!-- масштабирование улитки -->
 <g transform="translate(0 -130 ) scale(1)" > 
 <!-- Трава по которой ползет улитка -->
	<g transform="translate(0 330)" stroke="#005600" >	
   <path d="M-800,60 H1800"  stroke-width="4.5"  />
   <path d="M-800,55 H1800"  stroke-width="4.5"  />
   <path d="M-800,50 H1800"  stroke-width="4.5"  />
   <path d="M-800,45 H1800"  stroke-width="4.5"  />
 </g>
  
  <g id="snail" > 
    <path id="headBody" d="m271 13-4 1c-13 19 13 30 2 43-3-2-7-2-9-3 0-14-25-28-13-41l-4 0c-12 18 14 26 13 41-19 5-23 49-57 49-31-9-108-8-158-2-21 4-66 9-24 16 117 13 128-5 206 3 75 6 33-6 38-15 12-14 19-27 11-47 11-15-14-29-1-47z" style="fill:#88A96B;stroke:#000"> 
	
	<animate attributeName="d" dur="2s" repeatCount="indefinite" values="m271 13-4 1c-13 19 13 30 2 43-3-2-7-2-9-3 0-14-25-28-13-41l-4 0c-12 18 14 26 13 41-19 5-23 49-57 49-31-9-108-8-158-2-21 4-66 9-24 16 117 13 128-5 206 3 75 6 33-6 38-15 12-14 19-27 11-47 11-15-14-29-1-47z;m271 13-4 1c11 19.2 13 30 2 43-3-2-7-2-9-3 0-14 2-27.1-13.3-40.7L243 13c15.4 17.8 14 26 13 41-19 5-23 49-57 49C168 94 86 83.1 41 101 19.1 105-24.4 91.5 21.1 112 133.4 134.7 148.1 133.1 223 120c72.8-8.5 33-6 38-15 12-14 19-27 11-47 11-15 8.2-29.7-1-47z;m271 13-4 1c-13 19 13 30 2 43-3-2-7-2-9-3 0-14-25-28-13-41l-4 0c-12 18 14 26 13 41-19 5-23 49-57 49-31-9-108-8-158-2-21 4-66 9-24 16 117 13 128-5 206 3 75 6 33-6 38-15 12-14 19-27 11-47 11-15-14-29-1-47z" />
	</path>
    <path id="baseSnail" d="m83 110c-22-4-17-17 5-19l93-12c39 6 46 23 26 27-50 5-74 13-123 3zM130 130 130 130 130 130" class="s1"/>
    <path id="smallHouse" d="m130 130c3 3-2 5-4 5-6-1-8-8-6-13 4-9 15-11 23-7 12 6 14 21 8 32-8 14-28 17-41 9-17-11-21-34-10-51 13-20 41-24 60-11 23 15 27 47 12 69-18 25-54 30-78 13-28-20-34-60-14-88 22-31 67-37 97-15 30 21 39 63 23 95" transform="matrix(.99841 .056439 -.056439 .99841 16.305 -84.731)" class="s1"/>
    <g id="g4389" transform="translate(-359.76 -66.757)">
      <g id="g3587" transform="matrix(.95649 0 0 .95649 650.55 49.498)" stroke="#000">
       <desc> All rights belong to svg-art.ru. Copying with the permission of the owner with indication of the indexed link </desc>      
	   <path id="rightEye" d="m177 592c0 32-26 57-57 57s-57-26-57-57 26-57 57-57 57 26 57 57z" transform="matrix(.17771 0 0 .17771 -42.905 -80.331)" class="s2"/>
        <path id="rightEyeBlack" d="m177 592c0 32-26 57-57 57s-57-26-57-57 26-57 57-57 57 26 57 57z" transform="matrix(.11892 0 0 .13546 -35.976 -55.558)" class="s3"/>
        <path id="rightEyeWhite" d="m177 592c0 32-26 57-57 57s-57-26-57-57 26-57 57-57 57 26 57 57z" transform="matrix(.044528 0 0 .044528 -26.134 -5.617)" style="fill:#fff;stroke-width:22;stroke:#000"/>
      </g>
      <g id="g3595" transform="matrix(.95649 0 0 .95649 627.87 50.514)" stroke="#000">
        <path id="LeftEye" d="m177 592c0 32-26 57-57 57s-57-26-57-57 26-57 57-57 57 26 57 57z" transform="matrix(.17771 0 0 .17771 -42.905 -80.331)" class="s2"/>
        <path id="LeftEyeBlack" d="m177 592c0 32-26 57-57 57s-57-26-57-57 26-57 57-57 57 26 57 57z" transform="matrix(.11892 0 0 .13546 -35.976 -55.558)" class="s3"/>
        <path id="LeftEyeWhite" d="m177 592c0 32-26 57-57 57s-57-26-57-57 26-57 57-57 57 26 57 57z" transform="matrix(.044528 0 0 .044528 -26.134 -5.617)" style="fill:#fff;stroke-width:23;stroke:#000"/>
      </g> 
	    <animateTransform  attributeName="transform" type="translate" values="-359.76 -66.757;-361.76 -62.757; -359.76 -66.757"  dur="2s" repeatCount="indefinite"/>
    </g>
  
  <path id="mouth" d="m245 81c10 8 19 5 27 0" style="fill:black;stroke-width:2;stroke:#977640">
   <animate attributeName="d" dur="5s" values="m245 81c10 8 19 5 27 0;m245.4 80.3c10-8 19-5 27 0;m245 81c10 8 19 5 27 0" repeatCount="indefinite" />
  </path>  
  
    <path id="SpiralShadow" d="m77 29c-3 31-5 76 56 81 32-7 38 13 53-36-76 63-137-30-56-85 6-22-33 3-52 41z" style="fill:url(#radialGradient4530);filter:url(#filter4444)"/>
    <path id="SpiralShadow2" transform="matrix(.42727 0 0 .42113 -97.169 11.158)" d="m466 45c-22 83 33 130 89 129 32-16 47-23 51-66-66 115-213-100 7-108-25-23-96-45-147 45z" style="fill:url(#radialGradient4532);filter:url(#filter4444)"/>
    <path id="neckShadow" d="m256 125c19-3 23 4 14-3-23-15 1-18 6-47 3-6-19-30-48 12-22 28-99 22-99 30 0 7 110 8 127 8z" style="fill:url(#linearGradient4534);filter:url(#filter4502)"/>
 
  </g> 
    </g>

 <rect y="52%" width="150%" height="250px"  fill="url(#GradRect)" />	
 <path id="MpathSnail" d="M0 250 1000 250" stroke="gray" />
 <use xlink:href="#snail" transform="scale(0.75) translate(0 -110)" >
 <animateMotion id="anFirst" dur="45s" repeatCount="3" fill="freeze"   >
  <mpath xlink:href="#MpathSnail"/> 
  </animateMotion>
 </use>   
 
 <use xlink:href="#snail" transform="scale(0.25) translate(0 -80)" >
 <animateMotion id="anSecond" begin="anFirst.begin+5s" dur="45s" repeatCount="3" fill="freeze"   >
  <mpath xlink:href="#MpathSnail"/>
   </animateMotion>
 </use>   
 
  <use xlink:href="#snail" transform="scale(0.20) translate(0 -100)" >
 <animateMotion id="anSecond" begin="anFirst.begin+10s" dur="45s" repeatCount="3" fill="freeze"   >
  <mpath xlink:href="#MpathSnail"/> 
   </animateMotion>
 </use>  

 <use xlink:href="#grass" x="-350" y="100" transform="translate(-50 -100) scale(1.7)" />
<use xlink:href="#grass" x="-250" y="200" transform="translate(-50 -100) scale(1.4)"/>
 <use xlink:href="#grass" x="-150" y="250" /> 
  <use xlink:href="#grass" x="-80" y="250" /> 
 <use xlink:href="#grass" x="-50" y="200" transform="scale(1.2)" />
    <use xlink:href="#grass" x="100" y="200" transform="translate(-150 -40) scale(1.3)" />
 <use xlink:href="#grass" x="140" y="220" transform="translate(0 -50) scale(1.2)" />	
 <use xlink:href="#grass" x="150" y="200" transform="translate(0 -100) scale(1.4)" />	
 <use xlink:href="#grass" x="200" y="100" transform="translate(0 -50) scale(1.6)" />	
 <a href="https://svg-art.ru/?p=1435"><text  x="830px" y="400px" fill="white" font-size="16px"> Вернуться к статье </text></a>
	 </svg>
